<template>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
            <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
                <a-row>
                    <a-col :span="8">
                        <a-form-model-item label="接口类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="serverType">
                            <j-dict-select-tag type="list" v-model="model.serverType" dictCode="msi_server_type"
                                               placeholder="请选择接口类型"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="接口名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="interfaceCode">
                            <a-input v-model="model.interfaceCode" placeholder="请输入接口名"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="接口描述" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="interfaceDesc">
                            <a-input v-model="model.interfaceDesc" placeholder="请输入接口描述"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="接口地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="interfaceAddress">
                            <a-input v-model="model.interfaceAddress" placeholder="请输入接口描述"></a-input>
                        </a-form-model-item>
                    </a-col>

                    <a-col :span="8">
                        <a-form-model-item label="系统名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="systemCode">
                            <a-input v-model="model.systemCode" placeholder="请输入系统名" @click="modalPopOpen"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contacts">
                            <a-input v-model="model.contacts" placeholder="请输入联系人"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="联系方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tel">
                            <a-input v-model="model.tel" placeholder="请输入联系方式"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="预约测试日期" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                           prop="appointDevTime">
                            <j-date placeholder="请选择预约测试日期" v-model="model.appointDevTime" style="width: 100%"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="预计上线时间" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                           prop="appointProdTime">
                            <j-date placeholder="请选择预计上线时间" v-model="model.appointProdTime" style="width: 100%"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="当前版本" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="version">
                            <a-input v-model="model.version" placeholder="请输入当前版本" disabled></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                           prop="status">
                            <j-dict-select-tag type="list" v-model="model.status"
                                               dictCode="msi_register_server_status"
                                               placeholder="请选择状态"/>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </j-form-container>
        <ExosystemSelectPop ref="modalPop" @ok="modalPopOk"></ExosystemSelectPop>
    </a-spin>
</template>

<script>

    import { httpAction } from '@/api/manage'
    import ExosystemSelectPop from '../plugins/ExosystemSelectPop'

    export default {
        name: 'MsiRegisterExosystemInterfaceForm',
        components: { ExosystemSelectPop },
        props: {
            //表单禁用
            disabled: {
                type: Boolean,
                default: false,
                required: false
            }
        },
        data() {
            return {
                model: {},
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 5 },
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 },
                },
                confirmLoading: false,
                validatorRules: {
                    interfaceCode: [
                        { required: true, message: '请输接口名!' },
                    ],
                    systemCode: [
                        { required: true, message: '请输入系统名!' },
                    ],

                    contacts: [
                        { required: true, message: '请输入联系人!' },
                    ],
                    type: [
                        { required: true, message: '请输入接口类型!' },
                    ],
                },
                url: {
                    add: '/msi/msiRegisterExosystemInterface/add',
                    edit: '/msi/msiRegisterExosystemInterface/edit',
                    queryById: '/msi/msiRegisterExosystemInterface/queryById'
                }
            }
        },
        computed: {
            formDisabled() {
                return this.disabled
            },
        },
        created() {
            //备份model原始值
            this.modelDefault = JSON.parse(JSON.stringify(this.model))
        },
        methods: {
            add() {
                this.edit(this.modelDefault)
            },
            edit(record) {
                this.model = Object.assign({}, record)
                this.visible = true
            },
            submitForm() {
                const that = this
                // 触发表单验证
                this.$refs.form.validate(valid => {
                    if (valid) {
                        that.confirmLoading = true
                        let httpurl = ''
                        let method = ''
                        if (!this.model.id) {
                            httpurl += this.url.add
                            method = 'post'
                        } else {
                            httpurl += this.url.edit
                            method = 'put'
                        }
                        httpAction(httpurl, this.model, method).then((res) => {
                            if (res.success) {
                                that.$message.success(res.message)
                                that.$emit('ok')
                            } else {
                                that.$message.warning(res.message)
                            }
                        }).finally(() => {
                            that.confirmLoading = false
                        })
                    }

                })
            },
            popupCallback(value, row) {
                this.model = Object.assign(this.model, row)
            },
            modalPopOpen() {
                this.$refs.modalPop.title = '所属系统'
                this.$refs.modalPop.hide()
            },
            modalPopOk(rows) {
                let row = rows[0]
                this.model = Object.assign({}, this.model, {
                    exosystemId: row.id,
                    systemCode : row.orgCode + '_' + row.systemCode,
                })
            }
        }
    }
</script>
